<template>
  <div class="main">
    <div class="part">
      <div class="p-title">
        <div class="title">视频分析</div>
        <div class="search">
          <myDestSelect ref="destSelectRef" @destChange="destChange" />
          <myDateRangeSelect
            ref="dateSelectRef"
            @dateRangeChange="dateRangeChange"
          />
        </div>
      </div>
      <div class="p-cont">
        <div class="drug">
          <!-- <div class="title">
            管理居民总数 (人）
            <span>17126</span>
          </div> -->
          <div class="user-panel">
            <!-- <div class="up-item">
              <div class="up-des">
                <span>专业数量</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期，全平台课程包含的专业总数"
                />
              </div>
              <div class="up-num">{{ formatNum(8) }}</div>
            </div> -->
            <div class="up-item">
              <div class="up-des">
                <span>课程数量</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期，全平台课程的总数"
                />
              </div>
              <div class="up-num">{{ formatNum(2189) }}</div>
            </div>
            <!-- <div class="up-item">
              <div class="up-des">
                <span>课时节数</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期，所有课程内所有课时的总数（每个视频课时、知识点课算为一节课时）"
                />
              </div>
              <div class="up-num">11290</div>
            </div> -->
            <div class="up-item">
              <div class="up-des">
                <span>总课时</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期，所有课程的时长之和"
                />
              </div>
              <div class="up-num">2822.5</div>
            </div>
            <div class="up-item">
              <div class="up-des">
                <span>标签数量</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期，已上线视频的标签总数"
                />
              </div>
              <div class="up-num">89</div>
            </div>
            <!-- <div class="up-item">
              <div class="up-des">
                <span>小程序使用次数</span>
                <MyToolTip
                  content="指标定义：截止到筛选日期，所有小程序被点击打开的次数之和"
                />
              </div>
              <div class="up-num">89912</div>
            </div> -->
          </div>
        </div>
        <div class="d-search">
          <el-input
            v-model="searchLabelValue"
            placeholder="请输入标签关键字进行搜索"
            clearable
          >
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
        <div class="data-detail">
          <el-table
            ref="dataTableRef"
            :data="tableData"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column type="index" width="50" />
            <el-table-column property="labelName" label="标签" />
            <el-table-column property="labelClassName" label="标签分类" />
            <el-table-column property="courseNum" label="课程数量（个）" />
            <el-table-column property="totalCourse" label="总课时（小时）" />
            <el-table-column property="stuNums" label="累计观看人数（个）" />
            <el-table-column
              property="totalTime"
              label="累计浏览时长（小时）"
            />
            <el-table-column property="zanNums" label="点赞量（次）" />
            <el-table-column property="cangNums" label="收藏量（次）" />
            <el-table-column property="shareNums" label="转发量（次）" />
          </el-table>
        </div>
        <div class="page-wrap">
          <myPagination
            :total="listNum || 0"
            @currentChange="currentChange"
            ref="myPaginationRef"
          />
        </div>
      </div>
    </div>
    <div class="part part2">
      <div class="part-left">
        <div class="p-title">
          <div>TOP10 排行榜</div>
          <el-select v-model="topValue" class="m-2" placeholder="Select">
            <el-option
              v-for="item in topOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="p-content">
          <el-table :data="timeData" style="width: 100%">
            <el-table-column label="排名">
              <template #default="scope">
                <span
                  :class="[scope.row.sq < 4 ? 'blue cell-span' : 'cell-span']"
                  >{{ scope.row.sq }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="uName" label="视频名称" />
            <el-table-column prop="labels" label="标签" />
            <el-table-column prop="times" label="时长" />
            <el-table-column prop="createTime" label="添加日期" />
            <el-table-column prop="" label="观看人数" />
            <el-table-column prop="" label="浏览时长" />
            <el-table-column prop="" label="点赞量" />
            <el-table-column prop="" label="收藏量" />
            <el-table-column prop="" label="转发量" />
          </el-table>
        </div>
      </div>
      <!-- <div class="part-right">
        <div class="p-title">累积完成率 TOP10 课程排行</div>
        <div class="p-content">
          <el-table :data="timeData2" style="width: 100%">
            <el-table-column label="排名">
              <template #default="scope">
                <span
                  :class="[scope.row.sq < 4 ? 'blue cell-span' : 'cell-span']"
                  >{{ scope.row.sq }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="uName" label="课程名称" />
            <el-table-column label="完成率" align="center">
              <template #default="scope">
                {{ scope.row.timeNum + "%" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, onMounted, ref, Ref, onUnmounted, reactive } from "vue";

// 地区选择控件
import myDestSelect, { destSelectType } from "@/components/myDestSelect.vue";
import myDateRangeSelect, {
  dateRangeType
} from "@/components/myDateRangeSelect.vue";
import { formatNum } from "@/utils/tools";
import MyToolTip from "@/components/myToolTip.vue";
import { Search } from "@element-plus/icons-vue";
import myPagination from "@/components/myPagination.vue";
const myPaginationRef = ref();
const listNum = ref(0);

const destSelectRef = ref<destSelectType | null>(null);
const dateSelectRef = ref<dateRangeType>();
const drugSelectedPanel = reactive([1]);
const dataTimeType = ref(1);
const dataTableRef = ref(null);
const searchLabelValue = ref("");
const tableData = ref([
  {
    labelName: "心脑血管",
    labelClassName: "分类1",
    courseNum: 501,
    totalCourse: 539.68,
    stuNums: 9113,
    totalTime: 4091
  },
  {
    labelName: "免疫力",
    labelClassName: "分类1",
    courseNum: 399,
    totalCourse: 499.04,
    stuNums: 8107,
    totalTime: 2324
  },
  {
    labelName: "身材管理",
    labelClassName: "分类1",
    courseNum: 301,
    totalCourse: 452.81,
    stuNums: 6097,
    totalTime: 2199
  },
  {
    labelName: "肠胃内科",
    labelClassName: "分类1",
    courseNum: 251,
    totalCourse: 465.46,
    stuNums: 4083,
    totalTime: 2909
  },
  {
    labelName: "骨骼关节",
    labelClassName: "分类1",
    courseNum: 249,
    totalCourse: 388.91,
    stuNums: 3071,
    totalTime: 2789
  },
  {
    labelName: "皮肤",
    labelClassName: "分类1",
    courseNum: 201,
    totalCourse: 202.52,
    stuNums: 3059,
    totalTime: 2576
  },
  {
    labelName: "脑健康",
    labelClassName: "分类1",
    courseNum: 189,
    totalCourse: 139.29,
    stuNums: 1043,
    totalTime: 2209
  },
  {
    labelName: "情绪压力",
    labelClassName: "分类1",
    courseNum: 99,
    totalCourse: 134.79,
    stuNums: 1037,
    totalTime: 2000
  }
]);

const timeData = reactive([
  {
    sq: 1,
    uName: "健康饮食与营养",
    labels: "标签1,标签2,标签3",
    times: "01:11",
    timeNum: 1999,
    createTime: "2022-04-10"
  },
  {
    sq: 2,
    uName: "运动与健康生活方式",
    labels: "标签1,标签2,标签3",
    times: "01:11",
    timeNum: 1987,
    createTime: "2022-04-10"
  },
  {
    sq: 3,
    uName: "心理健康与减压技巧",
    labels: "标签1,标签2,标签3",
    times: "01:11",
    timeNum: 1973,
    createTime: "2022-04-10"
  },
  {
    sq: 4,
    uName: "睡眠与健康",
    labels: "标签1,标签2,标签3",
    times: "01:11",
    timeNum: 1951,
    createTime: "2022-04-10"
  },
  {
    sq: 5,
    uName: "预防疾病与保持健康",
    labels: "标签1,标签2,标签3",
    times: "01:11",
    timeNum: 1937,
    createTime: "2022-04-10"
  },
  {
    sq: 6,
    uName: "健康生活习惯与自我护理",
    labels: "标签1,标签2,标签3",
    times: "01:11",
    timeNum: 1913,
    createTime: "2022-04-10"
  },
  {
    sq: 7,
    uName: "身心灵健康平衡",
    labels: "标签1,标签2,标签3",
    times: "01:11",
    timeNum: 1891,
    createTime: "2022-04-10"
  },
  {
    sq: 8,
    uName: "健康老龄化与长寿秘诀",
    labels: "标签1,标签2,标签3",
    times: "01:11",
    timeNum: 1877,
    createTime: "2022-04-10"
  },
  {
    sq: 9,
    uName: "瑜伽与冥想",
    labels: "标签1,标签2,标签3",
    times: "01:11",
    timeNum: 1804,
    createTime: "2022-04-10"
  },
  {
    sq: 10,
    uName: "太极拳与气功",
    labels: "标签1,标签2,标签3",
    times: "01:11",
    timeNum: 1722,
    createTime: "2022-04-10"
  }
]);

const timeData2 = reactive([
  {
    sq: 1,
    uName: "瑜伽与冥想",
    timeNum: 69.21
  },
  {
    sq: 2,
    uName: "自然疗法与草药",
    timeNum: 65.24
  },
  {
    sq: 3,
    uName: "按摩与能量治疗",
    timeNum: 61.32
  },
  {
    sq: 4,
    uName: "正念减压与冥想",
    timeNum: 53.17
  },
  {
    sq: 5,
    uName: "中医养生与保健",
    timeNum: 41.26
  },
  {
    sq: 6,
    uName: "针灸与推拿",
    timeNum: 34.65
  },
  {
    sq: 7,
    uName: "太极拳与气功",
    timeNum: 23.54
  },
  {
    sq: 8,
    uName: "中药调理与食疗",
    timeNum: 12.43
  },
  {
    sq: 9,
    uName: "如何管好孩子的牙健康",
    timeNum: 11.44
  },
  {
    sq: 10,
    uName: "健康老龄化与长寿秘诀",
    timeNum: 10.23
  }
]);
function currentChange() {
  getServerData();
}
function destChange() {
  getServerData();
}

function dateRangeChange() {
  getServerData();
}
const topValue = ref(0);
const topOptions = reactive([
  {
    value: 0,
    label: "观看人数排行榜"
  },
  {
    value: 1,
    label: "观看时长排行榜"
  },
  {
    value: 2,
    label: "点赞量排行榜"
  },
  {
    value: 3,
    label: "收藏量排行榜"
  },
  {
    value: 4,
    label: "转发量排行榜"
  }
]);

async function getServerData() {
  // 获取数据
}

onMounted(() => {
  getServerData();
});
onUnmounted(() => {});
</script>
<style scoped lang="scss">
.search {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-select {
    margin-right: 20px;
  }

  .el-date-picker {
    margin-left: 20px;
  }
}

.p-cont {
  background-color: white;
  border-radius: 4px;

  .drug {
    .title {
      span {
        font-size: 24px;
      }
    }

    .user-panel {
      display: flex;
      align-items: center;
      margin-top: 20px;
      flex-wrap: wrap;

      .up-item {
        border: 1px solid #eee;
        border-radius: 8px;
        width: 15%;
        height: 130px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        cursor: pointer;
        min-width: 180px;
        margin: 20px 10px 0px;

        &.active {
          background-color: #4993fa;

          .up-des {
            color: white;
          }

          .up-num {
            color: white;
          }

          .up-inc {
            color: white;
          }
        }

        .up-des {
          font-size: 16px;
          color: #333;
          font-weight: 400;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .up-num {
          font-weight: bold;
          font-size: 36px;
          margin-top: 10px;
        }

        .up-inc {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 10px;
          font-size: 14px;
          font-weight: 400;

          .up-inc-left {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #666;

            svg {
              margin: 0px 2px;
              width: 16px;
              height: 16px;
            }

            .green {
              color: #00a870;
            }

            .red {
              color: #e54d59;
            }
          }

          .up-inc-right {
            cursor: pointer;
            color: #bbb;
          }
        }
      }
    }
  }

  .d-search {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;

    .el-input {
      width: 300px;
    }
  }

  .data-detail {
    margin-top: 20px;
  }

  .page-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

.part2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0f2f5;
  padding: 0px;

  .p-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
  }

  .part-line {
    height: 100%;
    background: gray;
    width: 20px;
  }

  .part-left {
    // width: calc(50% - 10px);
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 4px;
    padding: 20px;
  }

  .part-right {
    width: calc(50% - 10px);
    height: 100%;
    background: white;
    border-radius: 4px;
    padding: 20px;
  }
}

.blue {
  background: #409eff;

  border-radius: 10px;
  color: white;
}

.cell-span {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
</style>
